<script setup lang="ts">
const emit = defineEmits(['search','input'])

const title = defineModel()
const changeTitle = (e:any)=>{
    title.value = e.target.value
}

const searchClick = ()=>{
    emit('search')
}
const key = (e:any)=>{
    if(e.key === 'Enter')
    {
        searchClick()
    }
}
</script>

<template>
    <div class="box">
        <input type="text" name="" id="" placeholder="搜索网页ヾ(≧▽≦*)o" :value="title" @input="changeTitle" @keydown="key">
        <el-icon @click="searchClick" :size="30" color="#1865a7" class="icon">
            <Search />
        </el-icon>
    </div>
</template>
<style scoped>
.box
{
    position: relative;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, rgba(83,83,83,0.8) , rgba(204,204,204,0.8));
    border: 2px solid;
    border: 2px solid rgb(0, 139, 208);
    border-radius: 50px 50px 50px 50px;
    clip-path: inset(0 0 round 50px);
}


.box input
{
    color: white;
    width: calc(100% - 100px);
    height: 100%;
    outline: none;
    margin-left: 30px;
    border: 0;
    background-color: transparent;
    font-size: 20px;
}
.box input::placeholder
{
    margin-left: 10px;
    color: rgb(209, 209, 209);
}
.box .icon
{
    position: absolute;
    right: 20px;
    top: 10px;
    cursor: pointer;
}
.box .icon:hover
{
    color: red;
    transition: all 0.2s;
}
</style>